<script setup >
import { onMounted } from 'vue';
import AMapLoader from '@amap/amap-jsapi-loader';

const initMap = () => {
    AMapLoader.load({
        key: "0b808aa7a6763f7a5bd4e69f46665923",             // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        // plugins: ['AMap.ToolBar', 'AMap.Scale'],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    }).then((AMap) => {
        const map = new AMap.Map("container", {  //设置地图容器id
            viewMode: "3D",    //是否为3D地图模式
            zoom: 17,           //初始化地图级别
            center: [118.907614, 31.918374], //初始化地图中心点位置
        });

        AMap.plugin([
            // 'AMap.ToolBar', 
            'AMap.Scale',
            'AMap.MapType',
            'AMap.Geolocation'
        ], function () {
            // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
            // map.addControl(new AMap.ToolBar());

            // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
            map.addControl(new AMap.Scale());
            // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
            map.addControl(new AMap.MapType());
            // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
            map.addControl(new AMap.Geolocation());
        });
    }).catch(e => {
        console.log(e);
    })
}

onMounted(() => {
    initMap();
})

</script>

<template>
    <div id="container"></div>
</template>

<style lang='scss' scoped>
#container {
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 100%;
}
</style>